<template>
  <div class="details-view">
    <div class="details-head">
      <el-breadcrumb slot="breadcrumb">
        <el-breadcrumb-item to="/server">服务器</el-breadcrumb-item>
        <el-breadcrumb-item>{{ accessTitle }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <el-card class="detail-card">
      <el-form
        ref="record"
        label-position="top"
        :model="record"
        :disabled="disabled"
        :rules="disabled ? {} : rules">

        <el-row :gutter="20">

          <el-col :span="12">
            <el-form-item label="服务器名称" prop="name">
              <el-input v-model="record.name"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="服务器 IP" prop="host">
              <el-input v-model="record.host"></el-input>
            </el-form-item>
          </el-col>

          <el-col v-if="disabled" :span="12">
            <el-form-item label="服务器 token" prop="token">
              <el-input v-model="record.token"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="服务器运行模块" prop="module">
              <le-select
                v-model="record.module"
                :field="{ key: 'module', multiple: true }"
                :record="record"
                :disabled="disabled">
              </le-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="采集方式" prop="upType">
              <le-select
                v-model="record.upType"
                :field="{ key: 'upType'}"
                :record="record"
                :disabled="disabled">
              </le-select>
            </el-form-item>
          </el-col>
          <el-col v-if="record.upType !== 0" :span="12">
            <el-form-item label="上报速率" prop="rate">
              <el-input v-model.number="record.rate" placeholder="秒"></el-input>
            </el-form-item>
          </el-col>
          <el-col v-if="disabled" :span="12">
            <el-form-item label="服务器所属用户" prop="user">
              <le-select
                v-model="record.user"
                :field="{ url: '/select/user', key: 'user', }"
                :record="record"
                :disabled="disabled">
              </le-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注说明" prop="remark">
              <el-input v-model="record.remark"></el-input>
            </el-form-item>
          </el-col>
          <el-col v-if="disabled" :span="12">
            <el-form-item label="创建时间" prop="createdAt">
              <el-input :value="dateFormat(record.createdAt)"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <div v-if="!disabled" class="oper-area">
      <el-button type="success" @click="save">保存</el-button>
    </div>
  </div>
</template>


<script>
  import details from '~/mixins/details'

  export default {
    name: 'product-details-view',
    mixins: [details],
    components: {},
    data() {
      return {
        url: '/server',
        rules: {
          'name': [
            {
              'required': true,
              'message': '请填写服务器名称',
            },
          ],
          'host': [
            {
              'required': true,
              'message': '请填写服务器 IP',
            },
          ],
          'module': [
            {
              'required': true,
              'message': '请选择要运行的模块',
            },
          ],
          upType: [
            {
              'required': true,
              'message': '请选择采集方式',
            },
          ],
          rate: [
            {
              'required': true,
              'message': '请输入上报速率',
            },
          ],
        },
      }
    },
  }
</script>


<style lang="scss">

</style>
